<template>
	<view class="contaier">
		<!-- <view class="nav-box">
			<view class="" v-for="(item,index) in navList" :class="{active:navIndex==index}" @click="tabClick(index)">
				{{item}}
			</view>
		</view> -->
		<!-- 		<view class="search-box" style="padding: 16rpx 30rpx;">
			<u-search bg-color="FFFFFF" border-color="#F0F0F0" height="80" placeholder="请输入设备编号" action-text="取消"
				v-model="keywords" shape="round" :show-action="actionShow" @custom="seachCancel" @search="search">
			</u-search>
		</view> -->
		<!-- 隐患村庄 -->
		<view class="info-item">
			<view class="info-item-left">
				<view class="dot"></view>
				<span>乡镇</span>
			</view>
			<view class="place-class" @tap="village()">
				<input type="text" disabled v-model="yhvillage.name" placeholder="请点我选择乡镇" />
				<u-select v-model="show5" :list="villageName" @confirm="confirm5($event,index)">
				</u-select>
			</view>
			<view class="search-box" style="padding: 16rpx 30rpx;">
				<picker></picker>
				<picker @change="changeValue"  v-model="value1" :value="value1" range-key="label" :range="options1">
					<view class="uni-input">{{options1[value1].label?options1[value1].label:'请选择页数'}}</view>
				</picker>
				
			<!-- 	<u-dropdown>
					<u-dropdown-item v-model="value1" title="设备页数" :options="options1" @change="changeValue">
					</u-dropdown-item>
				</u-dropdown> -->
			</view>
		</view>


		<view class="page-body">
			<map class="map" id="myMap" ref="myMap" style="width:100%;height:65vh" @markertap="markertap"
				:latitude="latitude" :longitude="longitude" :markers="covers" :scale="scale"
				:show-location="show_location" :enable-traffic="isTraffic"></map>
		</view>
		<!-- 操作 -->
		<!-- <view class="operation">
			<view class="operation-item" @click="refresh">
				<u-icon name="reload" color="#999" size="40"></u-icon>
				<view>刷新</view>
			</view>
			<view class="operation-item" @click="getLocation">
				<image :src="e_zhongxin" mode=""></image>
				<view>中心</view>
			</view>
			<view class="operation-item" @click="traffic">
				<image :src="e_lukuang" mode=""></image>
				<view>路况</view>
			</view>
		</view> -->
		<view class="gas-station">
			<view class="gas-station-arrow" @click="upView" style="padding: 24rpx;" @touchmove="handletouchmove"
				@touchstart="handletouchstart" @touchend="handletouchend">
				<u-icon v-if="showList" color="#999" name="arrow-down" size="40"></u-icon>
				<u-icon v-else name="arrow-up" color="#999" size="40"></u-icon>
			</view>

			<view class="search-box" style="padding: 16rpx 30rpx;display: flex;">
				<view style="width:90%">
					<u-search  bg-color="FFFFFF" border-color="#F0F0F0" height="80" placeholder="请输入设备编号" action-text="取消"
						v-model="keywords" shape="round" :show-action="actionShow" @custom="seachCancel" @search="init(1)">
					</u-search>
				</view> 
				<view style="width: 10%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;" @click="init(1)">
					搜索
				</view>
			</view>

			<!-- <view class="search-box" style="padding: 16rpx 30rpx;">
				<u-search bg-color="FFFFFF" border-color="#F0F0F0" height="80" placeholder="请输入设备编号" action-text="取消"
					v-model="keywords" shape="round" :show-action="actionShow" @custom="seachCancel" @search="search">
				</u-search>
			</view>
 -->
			<view class="station-list" :style="{ height: `${showList ? 860 : initHeight}rpx` }">
				<scroll-view scroll-y="true" :style="{ height: `${showList ? 830 : initHeight}rpx` }"
					@scrolltolower="scrolltolower">
					<view v-for="item in list" :key="item.id" class="maplist"
						@tap="$navTo('./recordList?id='+item.equipment_id+'&type='+item.etype)">
						<view class="item">
							<!-- <view class="item-img">
								<image :src="item.photos.length<=0?placeholder:item.photos[0].url" mode=""></image>
							</view> -->
							<view class="item-info">
								<view class="item-nav">
									<view class="" style="display: flex;align-items: center;">
										<view class="item-title">{{item.equipment_name}}</view>
										<template v-if="item.status == '0'">
											<view class="pre pres">
												未完成
											</view>
										</template>
										<template v-if="item.status == '1'">
											<view class="pre pres">
												待审核
											</view>
										</template>
										<template v-if="item.status == '2'">
											<view class="pre">
												已完成
											</view>
										</template>
										<template v-if="item.status == '3'">
											<view class="pre pres">
												已驳回
											</view>
										</template>
									</view>
									<!-- <view class="item-title"></view> -->
									<view class="btn-nav">
										<text>今年检查次数：{{item.nums}}</text>
										<text>总检查次数：{{item.allnums}}</text>
									</view>
								</view>

								<!-- <view class="money">
									<image src="../../static/hot.png"> ￥3.8/m³
								</view> -->
								<view class="bianhao">设备编号：{{item.equipment_number}}</view>

								<!-- <view class="item-nav">
									<view>距离:<text>{{ item.distance/1000 |formatLatlon}}km</text></view>
									<view class="btn-nav" @click="navClick(item.location,item.address)">导航</view>
								</view> -->

							</view>
						</view>
						<view class="dhitem-nav">
							<view class="addres">
								<!-- <u-icon name="map"></u-icon> -->
								{{ item.address || '暂无'}}
							</view>
							<!-- <view class="btn-nav" @click="navClick(item.location,item.address)"> -->
							<view class="btn-nav" @tap.stop="navClick(item.lat +','+ item.long,item.address)">
								<image src="../../static/daohang.png">
									<!-- <view>导航</view> -->
							</view>
						</view>
					</view>
					<view v-if="list.length==0" style="text-align: center;height: 80rpx;line-height: 80rpx;">暂无内容</view>
					
					
				</scroll-view>
			</view>
			<view class="butn" @tap="lookup">按村镇查找</view>
		</view>
	</view>
</template>

<script>
	import GeocodeUtils from '@/common/geocode-utils.js'
	export default {
		data() {
			return {
				// navList: ['加油站', '停车场', '厕所', '超市'],
				navList: ['营业网点', '停车场', '厕所', '超市'],
				list: [],
				status: '正常',
				name: '故障',
				markerImg: [
					'/static/poi/gasstation.png',
					'/static/poi/parking.png',
					'/static/poi/wc.png',
					'/static/poi/shop.png'
				],
				initHeight: 340,
				navIndex: 0,
				map: '',
				latitude: 34.34127,
				longitude: 108.93984,
				scale: 12,
				covers: [],
				isTraffic: false,
				show_location: false,
				keywords: '',
				stationList: [],
				showList: false,
				actionShow: false,
				flag: 0,
				e_zhongxin: '',
				e_lukuang: '',
				placeholder: '/static/morent.png',
				datalist: [],
				yhvillage: {},
				villageName: [],
				show5: false,
				value1: 0,
				pagesizes: 1, //页数
				options1: [],
				page:1,
			}
		},
		onReady() {
			this.map = uni.createMapContext('myMap');
		},
		onLoad() {
			this.e_zhongxin = '/static/poi/e_zhongxin.png';
			this.e_lukuang = '/static/poi/e_lukuang.png';
			// this.keywords = this.navList[this.navIndex]
			this.init()
			// this.getEquipmentList()
			this.getHamletlist()
		},
		mounted() {
			this.getLocation();
		},
		filters: {
			formatLatlon(val) {
				if (typeof(val) === "number") {
					return parseFloat(val).toFixed(2)
				}
				return 0.00;
			}
		},
		watch: {
			pagesizes(newValue) {
				/* this.pagesizes = newValue
				this.createPage(this.pagesizes) */
			}
		},
		methods: {
			// 根据pagesizes  生成页数
			createPage(page) {
				console.log(page)
				for (let i = 1; i <= page; i++) {
					let obj = {}
					obj.label = `第${i}页`
					obj.value = i
					this.options1.push(obj)
				}
				console.log('this.options1', this.options1);
			},
			changeValue(v) {
				console.log('vvvv', v);
				this.value1 = v.detail.value
				this.getEquipmentList()
				console.log('this.options1', this.options1);
			},
			scrolltolower() {
				this.page=this.page+1
				this.init()
			},
			init(type) { 
				let _this = this
				if(type==1){
					_this.list=[]
				}
				uni.request({
					url: this.$api + 'equipment/getinspectlist  ',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						equipment_number: _this.keywords,
						page: _this.page
					},
					success: res => {
						if (res.data.code == 1) {
							_this.list = _this.list.concat(res.data.data)
						} 
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 村庄
			getHamletlist() {
				let _this = this

				uni.request({
					url: this.$api + 'user/towlist',
					method: 'POST',
					data: {
						token: this.token
					},
					success: (res) => {
						if (res.data.code == 1) {
							_this.villageName = res.data.data
						}
						console.log('_this.villageName', _this.villageName);
					}
				})
			},
			lookup() {
				uni.navigateTo({
					url: 'repair'
				})
			},
			markertap(e) {
				let {
					markerId
				} = e.detail;
				let item = this.covers.find(v => v.id === markerId);
				if (item && item.vehicleNo) {
					uni.navigateTo({
						url: `./realTimeMonitoringDetail?vehicleNo=${item.vehicleNo}`
					});
				}
			},
			tabClick(index) {
				this.navIndex = index;
				this.keywords = this.navList[index]
				this.covers = [];
				this.getEquipmentList()
			},
			navClick(location, address) {
				uni.openLocation({
					latitude: Number(location.split(',')[0]),
					longitude: Number(location.split(',')[1]),
					address: address,
					success: function() {
						console.log('success');
					},
					fail(err) {
						console.log("错误", err);
					}
				});
			},
			getEquipmentList() {
				uni.request({
					url: 'https://trq.wqzsgas.com/api/equipment/getlonlist',
					method: 'POST',
					data: {
						page: this.value1, 
						townid: this.yhvillage.value
					},
					success: (res) => {
						this.datalist = res.data.data.pois
						this.pagesizes = res.data.data.pagesizes;
						 this.createPage(res.data.data.pagesizes)
						this.stationList = [];
						this.covers = [];
						this.datalist.forEach(info => {
							this.stationList.push(info);
							this.covers.push({
								latitude: info.lat || 0,
								longitude: info.long || 0,
								width: 30,
								height: 30,
								label: {
									content: info.equipment_name+',编号：'+info.equipment_number,
									color: '#000000',
									fontSize: 12,
									textAlign: 'center',
									x: -40
								}
							});
						})
						this.map.includePoints({
							points: this.covers,
							padding: [50, 50, 50, 50]
						});
					},
				})



				// GeocodeUtils.getEquipmentList(this.latitude, this.longitude, this.keywords, data => {
				// 	console.log('data.markers00000000',data)
				// 	console.log('data.poisData',data.poisData)
				// 	this.stationList = [];
				// 	this.covers = [];
				// 	data.poisData.forEach(data => {
				// 		this.stationList.push(data);
				// 		this.covers.push({
				// 			latitude: data.location.split(',')[1],
				// 			longitude: data.location.split(',')[0],
				// 			iconPath: this.markerImg[this.navIndex],
				// 			width: 30,
				// 			height: 30,
				// 			// callout: {
				// 			// 	content: this.huanhang(data.name),
				// 			// 	color: '#0707f7',
				// 			// 	fontSize: 12,
				// 			// 	textAlign: 'center',
				// 			// 	display: 'ALWAYS',
				// 			// 	boxShadow: '5px 5px 10px #aaa',
				// 			// 	borderRadius: 2,
				// 			// 	padding: 8,
				// 			// },
				// 			label: {
				// 				content: this.huanhang(data.name),
				// 				color: '#000000',
				// 				fontSize: 12,
				// 				textAlign: 'center',
				// 				x: -40
				// 			}
				// 		});
				// 	})
				// 	this.map.includePoints({
				// 		points: this.covers,
				// 		padding: [50, 50, 50, 50]
				// 	});
				// })

			},
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						let {
							latitude,
							longitude
						} = res;
						// 设置中心
						this.latitude = latitude;
						this.longitude = longitude;
						this.getEquipmentList()
						// 地图聚焦
						let offset = 0.005;
						let points = [{
								latitude: latitude + offset,
								longitude: longitude + offset
							},
							{
								latitude: latitude - offset,
								longitude: longitude - offset
							}
						];
						this.map.includePoints({
							points
						});
					}
				});
				this.show_location = true;
			},
			refresh() {
				this.getEquipmentList();
			},
			//路况
			traffic() {
				this.isTraffic = !this.isTraffic;
			},
			upView() {
				this.showList = !this.showList;
			},
			search() {
				this.actionShow = true;
				let value = this.keywords;
				if (!value) {
					uni.showToast({
						title: '查询内容不能为空！',
						icon: 'none'
					});
					return false;
				}
				this.page = 1,
					this.list = []
				this.init()
				// this.getEquipmentList()
			},
			seachCancel() {
				this.actionShow = false;
			},
			handletouchmove(event) {
				// console.log(event)
				if (this.flag !== 0) {
					return;
				}
				let currentX = event.touches[0].pageX;
				let currentY = event.touches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;
				let text = '';
				this.mindex = -1;
				//左右方向滑动
				if (Math.abs(tx) > Math.abs(ty)) {
					if (tx < 0) {
						text = '向左滑动';
						console.log('向左滑动');
						this.flag = 1;
						//	this.getList();  //调用列表的方法
					} else if (tx > 0) {
						text = '向右滑动';
						console.log('向右滑动');
						this.flag = 2;
					}
				} else {
					//上下方向滑动
					if (ty < 0) {
						text = '向上滑动';
						console.log('向上滑动');
						this.flag = 3;
						// 调整盒子高低
						uni.getSystemInfo({
							success: res => {
								this.showList = true;
							}
						});
						//	this.getList();  //调用列表的方法
					} else if (ty > 0) {
						text = '向下滑动';
						console.log('向下滑动');
						this.flag = 4;
						// 调整盒子高低
						uni.getSystemInfo({
							success: res => {
								this.showList = false;
							}
						});
					}
				}
				//将当前坐标进行保存以进行下一次计算
				this.lastX = currentX;
				this.lastY = currentY;
				this.text = text;
			},
			handletouchstart(event) {
				// console.log(event)
				this.lastX = event.touches[0].pageX;
				this.lastY = event.touches[0].pageY;
			},
			handletouchend(event) {
				this.flag = 0;
				this.text = '没有滑动';
			},
			huanhang(s) {
				var re = '';
				var length = s.length;
				for (var i = 0, j = 1; i < length; i++, j++) {
					re += s[i];
					if (j && j % 6 == 0) {
						re += '\n';
					}
				}
				return re;
			},
			confirm5(e, i) {
				this.yhvillage.name = `${e[0].label} `
				this.yhvillage.value = e[0].value
				this.value1= 0,
				this.options1 = []
				this.getEquipmentList()
			},
			village() {
				this.show5 = !this.show5
			},
		},
	}
</script>

<style lang="scss" scoped>
	.money {
		color: red;
		font-size: 28rpx;

		image {
			height: 38rpx;
			width: 33rpx;
			position: relative;
			top: 8rpx;
		}
	}

	.dhitem-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #DFDFDF;

		.addres {
			padding: 0 20rpx;
		}

		.btn-nav {
			width: 100rpx;
			// height: 100rpx;
			// line-height: 45rpx;
			text-align: center;
			border-radius: 10rpx;
			color: #00A232;
			font-size: 24rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.nav-box {
		display: flex;
		text-align: center;
		height: 80rpx;
		align-items: center;
		border-bottom: 1px solid #gray;
		box-shadow: -1rpx 4rpx 10rpx rgba(2, 90, 221, 0.17);

		view {
			flex: 1;
			font-size: 28rpx;
		}

		.active {
			color: #334BE7;
			font-weight: bold;
		}
	}

	.operation {
		width: 85rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: -1rpx 4rpx 16rpx rgba(2, 90, 221, 0.17);
		border-radius: 10rpx;
		position: absolute;
		bottom: 580rpx;
		right: 21rpx;
		padding-top: 10rpx;
		z-index: 10;

		&-item {
			text-align: center;
			margin-bottom: 10rpx;

			view {
				font-size: 30rpx;
				font-family: SourceHanSansCN-Medium;
				line-height: 32rpx;
				color: rgba(102, 102, 102, 1);
			}
		}

		&-item:nth-child(1) {
			margin-bottom: 24rpx;

			image {
				width: 40rpx;
				height: 32rpx;
			}
		}

		&-item:nth-child(2) {
			margin-bottom: 10rpx;

			image {
				width: 39rpx;
				height: 39rpx;
			}
		}

		&-item:nth-child(3) {
			margin-bottom: 15rpx;

			image {
				width: 42rpx;
				height: 22rpx;
			}
		}
	}

	.gas-station {
		width: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 8rpx 0 24rpx rgba(57, 111, 250, 0.23);
		opacity: 1;
		border-radius: 20rpx 20rpx 0 0;
		position: absolute;
		bottom: 0;
		z-index: 100;

		.btn {
			width: 700rpx;
			height: 80rpx;
			margin: 0 auto;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(180deg, #2366D5 0%, #001B48 100%);
			border-radius: 200rpx;
			font-size: 32rpx;
			color: #E5EFFE;
		}

		&-arrow {
			display: flex;
			justify-content: center;
		}

		.station-list {
			padding: 0rpx;
			transition: all 0.3s;
			overflow: hidden;
			background: #F1F1F1;

			.maplist {
				background: #FFFFFF;
				// margin: 10rpx 0;
				padding: 0 20rpx;

			}

			.item {
				background: #FFFFFF;
				display: flex;
				padding-top: 10rpx;

				.item-img {
					flex-shrink: 0;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						border: 1px solid #f2f2f2;
					}
				}

				.item-info {
					width: 100%;
					padding: 5rpx 15rpx;

					text {
						color: #334BE7;
					}

					.item-title {
						font-size: 28rpx;
						font-weight: bold;
					}

					view:nth-child(2) {
						margin-top: 5rpx;
						font-size: 28rpx;
					}

					view:nth-child(3) {
						margin-top: 10rpx;
						font-size: 28rpx;
					}

					.item-nav {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.pre {
							width: 88rpx;
							height: 34rpx;
							line-height: 34rpx;
							background: rgba(0, 162, 50, 0.2);
							color: #00A232;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							text-align: center;
							border-radius: 24rpx;
							margin-left: 24rpx;
						}

						.pres {
							width: 88rpx;
							height: 34rpx;
							line-height: 34rpx;
							background: rgba(239, 64, 5, 0.2);
							color: #EF4005;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							text-align: center;
							border-radius: 24rpx;
							margin-left: 24rpx;
						}

						.btn-nav {
							display: flex;
							flex-direction: column;
							border-radius: 6rpx;
							color: #003690;

							text {
								font-size: 24rpx;
							}
						}

						.bianhao {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}

		}
	}

	.info-item {
		display: grid;
		grid-template-columns: auto 330rpx 330rpx;
		justify-items: center;
		align-items: center;

		.search-box {
			padding: 0;
		}
	}
</style>
